window.addEventListener("load", function () {
  // 1.获取元素
  let focus = this.document.querySelector(".focus");
  let ul = focus.children[0];
  //获取focus的宽度
  let w = focus.offsetWidth;
  let ol = focus.children[1];
  //2.利用定时器自动播放轮播图图片
  let index = 0;
  let timer = setInterval(function () {
    index++;
    let translateX = -index * w;
    ul.style.transition = "all .3s";
    ul.style.transform = "translateX(" + translateX + "px)";
  }, 2000);
  // 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend
  ul.addEventListener("transitionend", function () {
    //添加无缝滚动
    if (index == 3) {
      index = 0;
      //   console.log(index);
      //去掉过渡效果 这样让我们的ul 快速的调到目标位置
      ul.style.transition = "none";
      let translateX = index * w;
      ul.style.transform = "translateX(" + translateX + "px)";
    } else if (index < 0) {
      index = 2;
      ul.style.transition = "none";
      let translateX = index * w;
      ul.style.transform = "translateX(" + translateX + "px)";
    }
    //   3.小圆点跟随变化
    //把ol里面li带有current类名的选出来去掉类名  remove
    ol.querySelector(".current").classList.remove("current");
    //让当前的索引号的小li 加上 current    add
    ol.children[index].classList.add("current");
  });

  // 4.手指滑动轮播图
  // 触摸元素  touchstrat  获取手指初始坐标
  let startX = 0;
  let moveX = 0; //后面会使用这个移动距离 所以定义全局变量
  let flag = false;
  ul.addEventListener("touchstrat", function (e) {
    startX = e.targetTouches[0].pageX;
  });
  //移动手指 touchmove; 计算手指的滑动距离，并且移动盒子
  ul.addEventListener("touchmove", function (e) {
    //计算移动距离
    moveX = e.targetTouches[0].pageX - startX;
    //手指触摸就停止定时器
    clearInterval(timer);
    //移动盒子，盒子原来的位置 + 手指移动的距离
    let translateX = -index * w + moveX;
    //手指拖动的时候不需要动画效果，里面不需要过渡效果
    ul.style.transition = "none";
    ul.style.transform = "translateX(" + translateX + "px)";
    flag = true; //如果用户手指移动过再去做判断
    e.preventDefault(); //组织滚动的行为
  });
  //手指离开，根据移动距离去判断是回弹还是播放上一张下一章
  ul.addEventListener("touchend", function (e) {
    if (flag) {
      //1.如果移动距离大于50像素我们就播放上一张或下一章
      if (Math.abs(moveX) > 50) {
        //如果是右滑就是播放上下一章 moveX 是正值
        if (moveX > 0) {
          index--;
        } else {
          //如果是左滑就是播放上上一章 moveX 是负值
          index++;
        }
        let translateX = -index * w;
        ul.style.transition = "all .3s";
        ul.style.transform = "translateX(" + translateX + "px)";
      } else {
        // 2.如果移动距离小于50像素我们就回弹
        let translateX = -index * w;
        ul.style.transition = "all .1s";
        ul.style.transform = "translateX(" + translateX + "px)";
      }
    }
    //手指离开重新开启定时器
    clearInterval(timer);
    setInterval(function () {
      index++;
      let translateX = -index * w;
      ul.style.transition = "all .3s";
      ul.style.transform = "translateX(" + translateX + "px)";
    }, 2000);
  });
});
